<!-- 聊天 -->
<template>
	<view class="father">
	<scroll-view scroll-y="true" class="page" :scroll-top="focusTop" @scrolltoupper="scrolltoupper" :enable-flex="false"
		upper-threshold='10'>
		<view class="list">
			<view class="item flex flex-column" v-for="(item,index) in msg" :key="index">
				<view v-if="show" class="time flex justify-center align-center">
					{{getTimer(index)}}
				</view>
				<view v-if="item.userType == 1" class="bai flex">
					<view class="icon flex align-end">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view class="card flex align-center" v-if="item.chatStatus != 2">
						{{item.chatContent}}
					</view>
					<view class="cards flex align-center" v-if="item.chatStatus == 2" @click="preview(item.chatContent)">
						<image :src="item.chatContent" mode="heightFix"></image>
					</view>
				</view>
				<view v-if="item.userType == 0" class="lan flex">
					<view class="card flex align-center" v-if="item.chatStatus != 2">
						{{item.chatContent}}
					</view>
					<view class="cards flex align-center" v-if="item.chatStatus == 2" @click="preview(item.chatContent)">
						<image :src="item.chatContent" mode="heightFix"></image>
					</view>
					<view class="icon">
						<image :src="item.avatar" mode=""></image>
					</view>
				</view>
			</view>
			<view class="notice flex justify-center align-center" v-if="shaw">
				对方申请向你索要简历，
				<text class="text" @click="send">点击立即发送</text>
			</view>
		</view>
		<view class="fast" v-if="msgshowe">
			<view class="txt" v-for="(it,index) in msgList" :key="index" @click="fast(index)">{{it}}</view>
		</view>
		<view class="add" v-if="showPic">
			<view class="pic"  @click="showPic = false">
				<u-upload name="path" :header="header" max-count="2" :custom-btn="true" 
					:action="action" @on-Success="onSuccess" width="170" height="170">
					<view slot="addBtn" style="width: 170rpx;height: 170rpx;">
						<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/tianjiaimgsss.png" mode="">
						</image>
					</view>
				</u-upload>
			</view>
		</view>
	</scroll-view>
	<view class="inputbox">
		<view class="box flex justify-between align-center">
			<view class="left">
				<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/test/changyong.png" mode=""
					@click="msgshow()"></image>
			</view>
			<view class="center">
				<u-input type="text" :show-action="false" v-model="msgQurey.chatContent" :cursor-spacing="14" :clearable="false" confirm-type="发送"
					@confirm="sent" @focus="onfocus" @blur="onblur" />
			</view>
			<view class="right">
				<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/test/fatu.png" mode="" @click="picshow()"></image>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: {},
				msg:[],
				focusTop: '',
				messageQuery: {
					roomNumber: '',
					pageNum: 0,
					pageSize: 10
				},
				isFlex:false,
				avatar: '',
				show: true,
				value: '',
				msgQurey: {
					chatContent: '',
					chatStatus: 0,
					roomNumber: ''
				},
				msgshowe: false,
				msgList: ['我可以把我的简历发给你看吗', '对不起，我觉得职位不太适合我', '我可以去贵公司面试吗？'],
				qurey: {
					roomNumber: '',
					fileAddress:''
				},
				shaw: false,
				showPic: false,
				freshing:false,
				action: 'https://shanfu.51fnt.com/attentionList/uploadPicture',
				header: {
					'Content-Type': 'formData'
				},
				path: {
					path: 'path'
				},
			}
		},
		onLoad(option) {
			this.getData()
		},
		methods: {
			preview(it){
				uni.previewImage({
					current: it,
					urls: [it]
				})
			},
			async getData() {
				this.messageQuery.roomNumber = uni.getStorageSync('roomNum')
				let {
					data: message,
					code
				} = await this.$get('/userChatList/messageRecord', this.messageQuery)
				if (code == 200) {
					if(this.messageQuery.pageNum == 0){
						this.messageQuery.roomNumber = uni.getStorageSync('roomNum')
						this.messageQuery.pageNum =  message.totalPage 
						if(message.totalPage == 1){
							this.msg = message.body
						}else{
							this.messageQuery.pageNum -= 1
							let {
								data: mes,
								code
							} = await this.$get('/userChatList/messageRecord', this.messageQuery)
							if(code == 200){
								this.msg = mes.body.concat(message.body)
							}
						}
						this.onblur()
					}else{
						this.msg.unshift(...message.body)
					}
					console.log(this.msg)
					if (this.msg.length != 0) {
						this.shaw = true
					}
					// if (message.records.length == 10){
					// 	this.msgQurey.pageNum += 1
					// }
				}
			},
			scrolltoupper(e) {
				if(this.freshing == false){
					this.freshing = true
					if(this.messageQuery.pageNum != 1){
						this.messageQuery.pageNum -= 1
						this.getData().then(()=>{
							this.freshing = false
						})
					}
				}else{
					uni.showToast({
						title:'操作频繁',
						icon:'none'
					})
				}				
			},
			// pageScrollToBottom() {
			//    console.log("滚动")
			//    let that = this;
			//    wx.createSelectorQuery().select('.page').boundingClientRect(function(rect) {
			//      console.log(rect)
			//      wx.pageScrollTo({
			//        scrollTop: ,
			//        duration: 100
			//      })
			//    }).exec()
			//  },
			msgshow() {
				this.msgshowe = !this.msgshowe
				this.showPic = false
			},
			picshow() {
				this.msgshowe = false
				this.showPic = !this.showPic
			},
			onSuccess(res, index, lists) {
				if (res.code == 200) {
					this.showPic = false
					console.log(res.data.picture[0].url)
					let chat = {}
					chat.chatContent = res.data.picture[0].url
					chat.userType = 0
					chat.chatStatus = 2
					chat.createDate = new Date()
					chat.avatar = uni.getStorageSync('avatar')
					let qurey ={}
					qurey.roomNumber = uni.getStorageSync('roomNum')
					qurey.chatStatus = 2
					qurey.chatContent = res.data.picture[0].url
					this.$post('/userChatList/sendAMessage',qurey).then(()=>{
						this.msg.push(chat)
						this.onblur()
					})
					
				}
			},
			getTimer(i) {
				if (this.msg.length != 0) {
					let timer = this.msg[i].createDate
					let nowe = new Date(); // 当前的系统时间
					let oldtime = new Date(timer); //目标时间
					let t_day = oldtime.getDate();
					let t_year = oldtime.getFullYear();
					let t_month = oldtime.getMonth() + 1;
					let t_hour = oldtime.getHours();
					let t_minute = oldtime.getMinutes();
					if (t_hour < 10) {
						t_hour = '0' + t_hour
					}
					if (t_minute < 10) {
						t_minute = '0' + t_minute
					}
					let n_year = nowe.getFullYear();
					let n_month = nowe.getMonth() + 1;
					let n_day = nowe.getDate();
					let mistiming = nowe - oldtime; // 计算出当前时间，与目标时间的时间差
					if (this.item != {}) {
						if (t_year == n_year) {
							if (n_month == t_month) {
								//  在同一月  
								if (n_day - t_day == 1) {
									// 差等于1 昨天 + 时分
									console.log('昨天' + ' ' + t_hour + ':' + t_minute)
									return '昨天' + ' ' + t_hour + ':' + t_minute
								} else if (n_day - t_day == 0) {
									// 显示 时分
									console.log(t_hour + ':' + t_minute)
									return t_hour + ':' + t_minute
								} else {
									console.log(t_month + '.' + t_day + ' ' + t_hour + ':' + t_minute)
									return t_month + '.' + t_day + ' ' + t_hour + ':' + t_minute
								}
							} else {
								console.log(t_month + '.' + t_day)
								return t_month + '.' + t_day + ' ' + t_hour + ':' + t_minute
							}
						} else {
							//跨年了  显示 年 月 日 
							console.log(t_year + '.' + t_month + '.' + t_day + ' ' + t_hour + ':' + t_minute)
							return t_year + '.' + t_month + '.' + t_day + ' ' + t_hour + ':' + t_minute
						}
					}
				}

			},
			onfocus() {
				this.focusTop = 4000 * this.msg.length
			},
			onblur() {
				this.focusTop = 4000 * this.msg.length
				console.log(this.focusTop)
			},
			async send() {
				if (!uni.getStorageSync('jianli')) {
					uni.showToast({
						title: '您还未上传您的简历',
						icon: 'none',
						duration: 1000
					});
					let err = function() {
						uni.navigateTo({
							url: '/pagesA/attachment/attachment'
						})
					}
					setTimeout(err, 1000)
				} else {
					let {data,code} = await this.$get('/userResumeFile/list')
					if(code == 200 && data.length != 0){
						this.qurey.roomNumber = uni.getStorageSync('roomNum')
						this.qurey.fileAddress = data[0].fileAddress
						let {code: backcode} = await this.$post('/userResumeList/userCastJane', this.qurey)
						if(backcode == 200){
								let chat = {}
								chat.chatContent = '你已投简'
								chat.userType = 0
								chat.createDate = new Date()
								chat.chatStatus = 1
								chat.avatar = uni.getStorageSync('avatar')
								this.msg.push(chat)
								this.onblur()
								uni.showToast({
									title: '投简成功',
									icon: 'success'
								})
							}
					}
					

				}
			},

			// 发送消息
			async sent() {
				this.qurey.roomNumber = uni.getStorageSync('roomNum')
				this.msgQurey.roomNumber = uni.getStorageSync('roomNum')
				if(this.msgQurey.chatContent.length > 0){
					let {code} = await this.$post('/userChatList/sendAMessage', this.msgQurey)
					if(code == 200){
						let chat = {}
						chat.chatContent = this.msgQurey.chatContent
						chat.userType = 0
						chat.chatStatus = 0
						chat.createDate = new Date()
						chat.avatar = uni.getStorageSync('avatar')
						this.msg.push(chat)
						this.msgQurey.chatContent = ''
						this.onblur()
						this.shaw = true
					}
				}else{
					uni.showToast({
						title: '不能发送空白信息',
						icon:'none'
					})
				}
				
				
				// this.messageQuery.pageNum = 0
				// await this.getData().then(()=>{
				// 	this.onblur()
				// 	console.log("send")
				// })
			},
			async fast(id) {
				let msg = {}
				msg.roomNumber = uni.getStorageSync('roomNum')
				msg.chatContent = this.msgList[id]
				msg.chatStatus = 0
				let {code} = await this.$post('/userChatList/sendAMessage', msg)
				if(code == 200){
					let chat = {}
					chat.chatContent = msg.chatContent
					chat.userType = 0
					chat.chatStatus = 0
					chat.createDate = new Date()
					chat.avatar = uni.getStorageSync('avatar')
					this.msg.push(chat)
					this.msgshowe = false
					this.onblur()
					this.shaw = true
				}
			}
		}
	}
</script>

<style lang="scss">
	.father{
		height: 100vh;
		.page {
			height: calc(100vh - 190rpx - env(safe-area-inset-bottom));
			background: #f5f5f5;
			width: 100vw;
			padding-bottom: calc(120rpx + env(safe-area-inset-bottom) + env(safe-area-inset-bottom));
			.list {
				padding: 0 30rpx;
		
				.item {
					.time {
						margin: 40rpx auto 0 auto;
						font-weight: 400;
						color: #999999;
						font-size: 22rpx;
					}
		
					.bai {
						margin-top: 30rpx;
						.icon {
							width: 80rpx;
							height: 80rpx;
							margin-right: 20rpx;
							border-radius: 50%;
							overflow: hidden;
						}
		
						.card {
							max-width: 480rpx;
							padding: 0 30rpx;
							background: #FFFFFF;
							border-radius: 24rpx 24rpx 24rpx 0px;
							font-weight: 400;
							color: #333333;
							line-height: 42rpx;
							font-size: 28rpx;
							display: inline-block;
							word-wrap: break-word;
							word-break:break-all;
						}
						.cards{
							image{
								width: 200rpx;
								height: 200rpx;
							}
						}
					}
		
					.lan {
						margin-left: auto;
						margin-top: 30rpx;
		
						.icon {
							width: 80rpx;
							height: 80rpx;
							margin-left: 20rpx;
							border-radius: 50%;
							overflow: hidden;
						}
		
						.card {
							max-width: 480rpx;
							padding: 20rpx 30rpx;
							background: #0265EB;
							border-radius: 24rpx 24rpx 0px 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 42rpx;
							font-size: 28rpx;
							display: inline-block;
							word-wrap: break-word;
							word-break:break-all;
						}
						.cards{
							image{
								width: 200rpx;
								height: 200rpx;
							}
						}
					}
				}
		
				.notice {
					padding-top: 60rpx;
					font-weight: 400;
					color: #999999;
					font-size: 20rpx;
		
					.text {
						color: #01779F;
						font-size: 20rpx;
						font-weight: 400;
					}
				}
			}
		
			
		
			.fast {
				height: 300rpx;
				width: 100%;
				position: fixed;
				bottom: calc(190rpx + env(safe-area-inset-bottom));
				background-color: #FFFFFF;
		
				.txt {
					padding-left: 20rpx;
					border-top: 1rpx solid #ACA7A7;
					height: 100rpx;
					line-height: 100rpx;
					font-size: 30rpx;
				}
			}
			.add{
				height: 300rpx;
				width: 100%;
				position: fixed;
				bottom: calc(190rpx + env(safe-area-inset-bottom));
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				border-top: 1rpx solid #999999;
				.pic{
					padding: 0 40rpx 0 40rpx;
					.addBtn{
						
					}
				}
			}
		}
		.inputbox {
			border-top: 1rpx solid #999999;
			width: 100%;
			padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
			height: calc(190rpx + env(safe-area-inset-bottom));
			position: fixed;
			background-color: #F5F5F5;
			bottom: 0;
			left: 0;
			z-index: 99;
			.box {
				height: 130rpx;
				
				.left {
					width: 46rpx;
					height: 44rpx;
				}
				
				.center {
					margin: 20rpx 20rpx;
					height: 90rpx;
					width: 538rpx;
					border-radius: 24rpx;
					overflow: hidden;
					line-height: 90rpx;
				
					input {
						padding-left: 20rpx;
						height: 90rpx;
						width: 100%;
						background-color: #FFFFFF;
						border-radius: 30rpx;
					}
				}
				
				.right {
					width: 46rpx;
					height: 46rpx;
				}
			}
		}
	}
	
</style>
